<style>
	.container
	{
		display: flex;
		background-color: yellow;
		border-width: 5px;
		border-style: solid;
		border-color: darkblue;
		padding: 10px;
		margin: 10px;
	}
	.container > div
	{
		background-color: cyan;
		border-width: 5px;
		border-style: solid;
		border-color: darkcyan;
		padding: 5px;
		margin: 5px;
	}
</style>

<div class="container" style="width: 500px">
    <div style="flex: 1 1 200px">block number 1</div>
    <div style="flex: 2 1 200px">block number 2</div>
    <div style="flex: 2 3 200px">hello my dear friend</div>
</div>
<div class="container" style="width: 200px">
    <div style="flex: 1 1 200px">block number 1</div>
    <div style="flex: 2 1 200px">block number 2</div>
    <div style="flex: 2 3 200px">hello my dear friend</div>
</div>
<div class="container" style="width: 300px">
    <div style="flex: 1 1 200px">block number 1</div>
    <div style="flex: 2 1 200px">block number 2</div>
    <div style="flex: 2 3 200px">hello my dear friend</div>
</div>
<div class="container" style="width: 700px">
    <div style="flex: 1 1 200px">block number 1</div>
    <div style="flex: 2 1 200px">block number 2</div>
    <div style="flex: 2 3 200px">hello my dear friend</div>
</div>
